<template>
    <view class="content">
        <view class="messageList">
            <block v-for="messageId in messageIdList" :key="messageId">
                <MessageCard class="messageCard" :message-id="messageId"/>
            </block>
        </view>
        <button class="sendButton" @click="sendMessage"  type="primary">发送内容</button>
    </view>
</template>

<script>
    import MessageCard from 'components/MessageCard';

    export default {
        components: { MessageCard },
        data() {
            return {
                messageIdList: [],
                queryCount: 10,
                currentCount: 0
            };
        },
        methods: {
            randomString(length) {
                let n = '';
                for (let i = 0; i < length; i++) n += String.fromCodePoint(Math.round(Math.random() * 20901) + 19968);
                return n;
            },
            async loadMessage(isClear) {
                if (isClear) {
                    this.currentCount = 0;
                    this.messageIdList = [];
                }
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                const db = wx.cloud.database();
                const messageBoardCollection = db.collection('messageboard');
                const queryResult = await messageBoardCollection.orderBy('_id', 'desc').field({
                    _id: true
                }).skip(this.currentCount).limit(this.queryCount).get();
                if (queryResult.data.length > 0) {
                    this.messageIdList.push(...queryResult.data.map((data) => data._id));
                    this.currentCount += queryResult.data.length;
                }
                uni.hideLoading();
            },
            async onPullDownRefresh() {
                await this.loadMessage(true);
                uni.stopPullDownRefresh();
            },
            async onReachBottom() {
                await this.loadMessage();
            },
            async onLoad() {
                await this.loadMessage(true);
            },
            async sendMessage() {
                uni.navigateTo({
                    url: '/pages/send/index'
                });
            // uni.showLoading({
            //     title: '发送消息中',
            //     mask: true
            // });
            // const likeResult = await wx.cloud.callFunction({
            //     name: 'sendMessage',
            //     data: {
            //         fromLabel: this.randomString(3),
            //         toLabel: this.randomString(3),
            //         messageContent: this.randomString(10),
            //         messageImageUrls: []
            //     }
            // });
            // uni.hideLoading();
            // if (likeResult.result.status === 'fail') {
            //     uni.showToast({
            //         title: likeResult.result.message,
            //         icon: 'none',
            //         position: 'bottom'
            //     });
            // }
            // // this.currentCount = 0;
            // await this.loadMessage();
            }
        }
    };
</script>

<style lang="scss" scoped>
@import "~style/global";

.content {
    @include flexColumnCenter;
    padding-bottom: px2rpx(60);
    position: relative;
}

.messageList {
    @include flexColumnCenter;
    width: 95%;

    .messageCard {
        border: #2C405A px2rpx(1) solid;
        border-radius: px2rpx(10);
        width: 100%;
        margin-bottom: px2rpx(20);
    }
}

.sendButton{
    position: fixed;
    bottom: px2rpx(20);
}
</style>
